<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/body.css">
    <script src="./js/vue.js"></script>
      <!-- jquery配置文件 -->
      <script src="./js/jquery-3.5.1.min.js"></script>
      <!-- axios配置文件 -->
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="contentt">
        <div id="nav"><br><br><br>
            <a href="#" class="glyphicon glyphicon-yen">收银<hr></a>
            <a href="#" class="glyphicon glyphicon-lock">店铺<hr></a>
            <a href="#" class="glyphicon glyphicon-th-large">会员<hr></a>
            <a href="#" class="glyphicon glyphicon-cog">设置<hr></a>
        </div>
        <div id="center">
            <h2>收银</h2>
            <table id="bk" class="table table-striped" border="1">
              
                <tr>
                    <td>点餐</td>
                   
                </tr>
                <tr>
                    <td>商品名称</td>
                    <td>数量</td>
                    <td>价格</td>
                    <td>操作</td>
                   
                </tr>
                <tr v-for="item in tabledao">
                    <td>{{item.name}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.price}}</td>
                    <td><button type="button" class="btn btn-default" v-on:click="del(item)">删除</button></td>
                </tr>
               
            </table>
            <p>数量：{{number}} 金额：{{money}}元</p>
            <div id="an">
                <button  type="button" class="btn btn-success" @click="clear">清空账单</button>
                <button type="button" class="btn btn-primary" @click="jz">结账</button>
            </div>
          
        </div>
        <div id="right">
            <h2>热门商品</h2>
            <div id="js" v-for="sp in splist" v-on:click="add(sp)">
                <img v-bind:src="'http://127.0.0.1:8080/canyin/img/'+sp.img" class="img-rounded">
                <p>{{sp.name}}<br><span class="rmb">￥</span><span>{{sp.price}}</span></p>
            </div>
        
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>